<div class="classify_container">
	<div class="row">
		<div class="col-md-1">
		  <button class="btn btn-default addCate" type="submit"  data-toggle="modal" data-target="#exampleModal">新增</button>
		</div>
	</div>
	<div class="row">
		<table class="table table-hover">
		 <thead>
		   <th>序号</th>
		   <th>名称</th>
		   <th>排序号</th>
		   <th>父栏目</th>
		   <th>描述</th>
		   <th>操作</th>
		 </thead>
		 <tbody>
		   <!-- <tr>
			 <td>1</td>
			 <td>usernaem</td>
			 <td>name</td>
			 <td>role</td>
			 <td>18777772222</td>
			 <td>
			   <span>设置</span>
			   <span>移出</span>
			   <span>详情</span>
			   <span>修改</span>
			 </td>
		   </tr> -->
		   
		 </tbody>
	  </table>
	</div>
	<!-- 1mo -->
	<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
		<div class="modal-dialog" role="document">
		  <div class="modal-content">
			<div class="modal-header">
			  <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
			  <h4 class="modal-title" id="exampleModalLabel">新增栏目</h4>
			</div>
			<div class="modal-body">
			  <form>
				<div class="form-group">
				  <label for="recipient-name" class="control-label"><span style="color:red;">*</span> 栏目名称:</label>
				  <input type="text" class="form-control name" id="recipient-name">
				</div>
				<div class="form-group">
					<label for="recipient-name" class="control-label">父栏目:</label>
					<select class="form-control">
						<option class="fatherLm">请选择父栏目</option>
						
					</select>
				</div>
				<div class="form-group">
					<label for="recipient-name" class="control-label">序号:</label>
					<input type="text" class="form-control no" id="recipient-name">
				</div>
				<div class="form-group">
				  <label for="message-text" class="control-label">栏目介绍:</label>
				  <textarea class="form-control description" id="message-text"></textarea>
				</div>
			  </form>
			</div>
			<div class="modal-footer">
			  <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
			  <button type="button" class="btn btn-primary sure">确定</button>
			</div>
		  </div>
		</div>
	</div>
	<!-- 结束 -->

	<!-- 删除模态框 -->
<!-- 给删除按钮增加：data-toggle="modal" data-target=".delete" -->
<div class="modal fade ydelete" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-sm" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title">提示</h4>
        </div>
        <div class="modal-body">
          <p>此操作将永久删除文件，是否继续?</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
          <button type="button" class="btn btn-primary yyDelete">确定</button>
        </div>
      </div>
    </div>
</div>
  <!-- 模态框结束-->

   <!-- 删除成功后的模态框 -->
   <div class="modal fade success-modal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-sm" role="document">
      <div class="modal-content">
        <div class="modal-body">
          <p></p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">确定</button>
        </div>
      </div>
    </div>
  </div>
  <!-- 模态框结束 -->
</div>
<script>
var baseUrl='http://123.57.57.227:7788/';
var id;
//封装请求函数
function getData(url,type,data){
	//ajax异步
	var p=new Promise((resolve,reject)=>{
		$.ajax({
			url:url,
			type:type,
			data:data,
			headers:{
				"Authorization":sessionStorage.getItem("token")
			},
			success:function(data){
				resolve(data);
			}
		});
	});
	return p;
}
function getCateData(url){
	return getData(baseUrl+url,'get').then(function(data){
	// console.log(data.data);
		data.data.forEach(function(item,index){
			$('.classify_container tbody').append(`<tr>
					<td>`+(index+1)+`</td>
					<td>`+item.name+`</td>
					<td>`+(item.no==null?'':item.no)+`</td>
					<td>`+(item.parentId==null?'':item.parentId)+`</td>
					<td>`+(item.description==null?'':item.description)+`</td>
					<td>
						<span class='bj' data-toggle="modal" data-target="#exampleModal" >编辑</span>
						<span class='delete' data-toggle="modal" data-target=".ydelete">删除</span>
					</td>
			</tr>`);
			//给新增按钮父亲栏目追加option
			$('.classify_container .fatherLm').after('<option>'+item.name+'</option>');
		});
		
		//编辑
		$('.bj').click(function(){
			var name=$(this).parent().parent().children().eq(1).text();
			getData(baseUrl+'category/findAll','get').then(function(data){
				data.data.forEach(function(item){
					if(item.name==name){
						// alert(1111)
						id=item.id;
						$('.no').val(item.no);
						$('.name').val(item.name);
						$('.description').val(item.description);
						$('.fartherLm').val(item.parentId);
					}
				})
			})
			// console.log(getIds(name));		
		});
		//删除
		$('.delete').click(function(){
			var name=$(this).parent().parent().children().eq(1).text();
			getData(baseUrl+'category/findAll','get').then(function(data){
				data.data.forEach(function(item){
					if(item.name==name){
						// alert(1111)
						id=item.id;
					}
				})
			})
		})
		// //封装获取id等信息的函数
		// function getIds(name){
		// 	getData(baseUrl+'category/findAll','get').then(function(data){
		// 		data.data.forEach(function(item){
		// 			if(item.name==name){
		// 				// alert(1111)
		// 				id=item.id;
		// 				// name=item.name;
		// 				// description=item.description;
		// 				// no=item.no;
		// 				// parentId=item.parentId;
		// 			}
		// 		})
		// 	})
		// 	return id
		// }
	});
}
getCateData('category/findAll');

//通过是否传id参数封装保存事件
function sure(id){
	var name=$('.name').val();
	var description=$('.description').val();
	var no=$('.no').val();
	if(name && (id==undefined)){
		if(description && no){
			data='name='+name+'&description='+description+'&no='+no;
		}else if((description=='') && no){
			data='name='+name+'&no='+no;
		}else{
			data='name='+name+'&description='+description;
		}
	}else if(name && id){
		if(description && no){
			data='id='+id+'&name='+name+'&description='+description+'&no='+no;
		}else if((description=='') && no){
			data='id='+id+'&name='+name+'&no='+no;
		}else{
			data='id='+id+'&name='+name+'&description='+description;
		}
	}else{
		data=undefined;
		alert('必须输入用户名')
	}
	if(data){
		getData(baseUrl+'category/saveOrUpdate','post',data).then(function(data){
        // alert(data.message);
			$('#exampleModal').modal('hide');
			if(data.status==200){
				// suc(data);
				$('tbody').empty();
				getCateData('category/findAll'); 
				suc(data);
			}else if(data.status==500){
				// suc(data);
				alert(data.message);
				suc(data);	
			}
  		})
	}
	
}

//封装成功后弹框函数
function suc(data){
  $('.classify_container .success-modal p').html(data.message);
  $('.classify_container .success-modal').modal('show');
};

//给新增绑定事件
$('.addCate').click(function(){
	if(id){
		id=undefined;
	}
	$('.no').val('');
	$('.name').val('');
	$('.description').val('');
})

//给确定更新绑定事件
$('.sure').click(function(){
	if(id){
		// console.log(id)
		sure(id);
	}else{
		// // console.log(id)
		sure()
	}
})

//确认删除绑定事件
$('.yyDelete').click(function(){
	getData(baseUrl+'category/deleteById?id='+id,'get').then(function(data){
		$('.ydelete').modal('hide');
		if(data.status==200){
			$('tbody').empty();
			getCateData('category/findAll'); 
			suc(data);
		}else{
			suc(data);
		}
	})
})


</script>
<style>
	.classify_container{
      /* height: 100px; */
      padding-left:10px;
      color: #666666;
    }
    .classify_container .col-md-1{
      height:32px;
      color: #2cb5ac;
	  padding-left: 5px;
    }
	.classify_container .btn-default{
      color:#fff;
      background-color: #2cb5ac;
      font-size: 12px;
    }
    .classify_container table td span:hover{
      cursor: pointer;
    }
	.classify_container table th,.classify_container table td{
      font-size: 12px;
    }
</style>